/*
 * MinIO Cloud Storage (C) 2018 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react";
import { connect } from "react-redux"
import { createStyles, makeStyles, withStyles, Theme } from '@material-ui/core/styles';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import Alert from '@material-ui/lab/Alert';
import Collapse from '@material-ui/core/Collapse';
import api from "../../../common/api";
import { ChartUrl, beforeNowtimeBySec, timeConvert } from "./types";

const styles = (theme: Theme) =>
  createStyles({
    alert: {
      position: "absolute",
      width: "100%",
      textAlign: "center",
      zIndex: 1000, 
      top: 35
    },
    alertPop: {
      margin: "0 auto",
      width: "130px"
    },
    nodeTitle: {
      position: "relative",
      height:"190px"
    },
});
interface ChartState {
  classes: any;
  inputNode: string
}
export class NodeReadWrite extends React.Component<ChartState, any> {
  constructor(props:any){
    super(props);
    this.state = {
      records: [],
      xrecord:[],
      recordsData:[],
      loading: false,
      oldNode:"",
      msg:"",
      dataWarn:"",
      open: false
    };
  };
  setOpen(a:boolean){
    this.setState({
      open: a
    })
  }
  getChart(type:any) {
    // 统计磁盘 1分钟每秒 读写 I/O ，Mb/S3
    let url = ChartUrl+"(rate(node_disk_read_bytes_total%7Bdevice%3D%27sda%27%7D%5B1m%5D)%2Brate(node_disk_written_bytes_total%7Bdevice%3D%27sda%27%7D%5B1m%5D))%2F1024%2F1024&start="+Date.parse(beforeNowtimeBySec(30)).toString().substring(0,10)+"&end="+Date.parse(beforeNowtimeBySec(0)).toString().substring(0,10)+"&step=1";
    api
      .invoke("GET", url)
      .then((res) => {
        var xrec = new Array();
        var rootData = res.data.result;
        if(rootData != []){
          for(var i=0;i<rootData.length;i++){
            
            if(rootData[i].metric.instance== type ){

              for(var a=0;a<rootData[i].values.length;a++){
                rootData[i].values[a][0] = timeConvert(parseInt(rootData[i].values[a][0]));
                rootData[i].values[a][1] = parseFloat(rootData[i].values[a][1]).toFixed(3);
              }
              var data = rootData[i].values;
              for(var n=0;n<data.length;n++){
                xrec[n]=data[n][0]
              }
              let recData =  {
                  type: 'line',
                  itemStyle: {
                    color: '#5793f3'
                  },
                  areaStyle: {
                    // @ts-ignore
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#aac8f9'
                      }, {
                          offset: 1,
                          color: '#5793f3'
                      }])
                  },
                  data: rootData[i].values.map(function (item:any) {
                    return item[1];
                })
              }
              // console.log(xrec)
              // console.log(rootData[i].values)
              this.setState({
                xrecord: xrec,
                recordsData: recData,
              });
              break;

            }else{
              this.setState({
                dataWarn: "暂无数据",
                xrecord: ""
              });
              this.setOpen(true);
            }
          }
          
        }else{
          this.setState({
            dataWarn: "暂无数据",
            xrecord: ""
          })
          this.setOpen(true);
        }
      })
      .catch(err => {
        this.setState({
          dataWarn: "暂无数据",
          xrecord: ""
        })
        this.setOpen(true);
      });
  }
  componentDidUpdate(prevProps:any): void {
    if(prevProps.inputNode !== this.state.oldNode){
        this.getChart(this.state.oldNode);
        var timer = setInterval(() => {
          let url = window.location.href
          if(url.indexOf("/nodeexporter") != -1){
            this.getChart(this.state.oldNode);
          }else{
            clearInterval(timer)
          }
        }, 25000)
    }
  }
  static getDerivedStateFromProps(nextProps:any, prevState:any) {
    // 当传入的type发生变化的时候，更新state
    if (nextProps.inputNode !== prevState.oldNode) {
      return {
        oldNode: nextProps.inputNode
      }
    }
    // 否则，对于state不进行任何操作
    return null;
  }
  getOption= () => ({
      title: {
        text: this.state.msg
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        boundaryGap: false,
        data: this.state.xrecord
      },
      yAxis: {
        name: 'Mb/S',
        splitLine: {
          show: true
        }
      },
      series: this.state.recordsData
  });
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.nodeTitle}>
      {!this.state.xrecord ? (
        <div className={classes.alert}>
        <Collapse in={this.state.open} className={classes.alertPop}>
          <Alert severity="error" style={{padding: "0 16px"}}>
            {this.state.dataWarn}
          </Alert>
        </Collapse>
        </div>
        ):(
        <ReactEcharts
          ref="chart"
          option={this.getOption()}
          style={{marginTop:'-20px',marginBottom:'-20px', height: '230px', width: '100%'}} />
        )}
      </div>
    );
  }
};
export default withStyles(styles)(NodeReadWrite)